<template>
  <view class="head">
    <view class="card">
      <view class="vip">普通会员</view>
      <view class="money">
        ￥
        <text class="yure">{{ card.cardBalance / 100 }}</text>
      </view>
      <view class="cardId">NO.{{ card.cardNo }}</view>
    </view>
  </view>
  <view class="topup mt-[20rpx]">
    <view class="topup-btn" @click="gotopup">立即充值</view>
  </view>

  <view class="list">
    <view class="flex" @click="goentry">
      <view>充值记录</view>
      <view>></view>
    </view>
    <view class="flex" @click="godisbursement">
      <view>消费记录</view>
      <view>></view>
    </view>
  </view>
</template>

<script setup>
// const $http = inject('$http');
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserStore())
import { getCardByUserId } from '@/service/card/card' // 看这里
const { loading, error, data, run } = useRequest(() => getCardByUserId(formdata.value))

const card = ref({})
// const userInfo = uni.getStorageSync('userInfo')
const formdata = ref({})

formdata.value.usrId = userInfo.value.id

console.log(formdata.value.usrId)

onShow(() => {
  run().then((res) => {
    // console.log('1231231')
    // console.log(res)
    card.value = res
  })
})

const goentry = () => {
  uni.navigateTo({
    url: 'entrylist?cardID=' + card.value.id,
  })
}

const godisbursement = () => {
  uni.navigateTo({
    url: 'pages/card/disbursementlist?cardID=' + card.value.id,
  })
  // uni.$u.route({
  //   // url:'pages/money/Parkingfee'
  //   url: 'pages/card/disbursementlist?cardID='+card.value.id
  // });
}

const gotopup = () => {
  console.log(666)
  uni.navigateTo({
    url: '/pages/card/topup',
  })
  // uni.navigateTo({
  //   // url: 'pages/card/topup',
  // })
  // uni.$u.route({
  //   // url:'pages/money/Parkingfee'
  //   url: 'pages/money/topup'
  // });
}
</script>

<style scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300rpx;
  padding: 20rpx;
}
.card {
  position: relative;
  width: 90%;
  height: 300rpx;
  padding: 20rpx;
  background-color: #4e5394;
  border-radius: 40rpx;
}

.cardId {
  position: absolute;
  bottom: 10%;
  font-size: 30rpx;
  font-weight: 900;
  color: #ffffff;
}

.vip {
  font-size: 44rpx;
  font-weight: bold;
  color: #ffffff;
}

.money {
  position: absolute;
  top: 10%;
  right: 10%;
  color: #ffffff;
}

.topup {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300rpx;
}

.topup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300rpx;
  height: 100rpx;
  color: #ffffff;
  background-color: #fe6d32;
  border-radius: 5rpx;
}

.list {
  padding: 20rpx 20rpx;
  font-size: 35rpx;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20rpx;
  margin-top: 10rpx;
  font-size: 24rpx;
  border-bottom: 1px solid #f2f2f2;
}

.yure {
  font-size: 35rpx;
}
</style>
